<script setup lang="ts">
import tabBar from "@/components/tab-bar.vue";
import kdataFreBar from "./kdata-fre-bar.vue";
import { nextTick, onBeforeUnmount, ref, watch } from "vue";
import { onMounted } from "vue";
import * as echarts from "echarts";
import klineOptions from "./kline-options";
import * as rtdataSubscriberService from "@/assets/api/rtdatasubscriberservice_0_0_1";
import { useQuoteStore } from "@/store/quote";
import { ElMessage } from "element-plus";
import { FQType } from "@/assets/api/rtdatasubscriberservice_0_0_1";
import { reactive } from "vue";


const quoteStore = useQuoteStore();
const klineChart = ref<HTMLDivElement>();
let myChart: any = undefined;
let timerId: any = undefined;

let isChangeFreNum = false;

const data = reactive<{
  isFresh: boolean
}>({
  isFresh: false
});
watch(() => quoteStore.codeTags.tabIndex, () => {
  showKdataOnPanel();
});

const onHandlerWindowResize = () => {
  if (!myChart) {
    return;
  }
  myChart.resize();
};

let freNum = 1;
let dataType = "分时";

let lastBarRecord = {
  datetime: 0,
  close: 0.0,
  len: 0
};

onMounted(async () => {

  //

  let codeInfo = quoteStore.getCurCodeInfo();
  const res = await rtdataSubscriberService.SubscribeRtData({
    market: codeInfo.market,
    code: [codeInfo.code]
  })
  showKdataOnPanel();
  window.addEventListener('resize', onHandlerWindowResize);
  timerId = setInterval(() => {
    showKdataOnPanel();
  }, 500);
});



const showKdataOnPanel = async () => {
  let codeInfo = quoteStore.getCurCodeInfo();
  const res = await rtdataSubscriberService.GetRtMinData({
    market: codeInfo.market,
    code: codeInfo.code,
    filled_up: true,
    fq: FQType.NA,
    fre_num: freNum
  });
  //
  if (res.err_code !== 0) {
    ElMessage.error(res.err_msg);
    return;
  }
  if (!res.data) {
    return
  }

  for (let i = 0; i < res.data.datas.length; ++i) {
    // 开盘价为 0 也就是行情还没有推送到，要全部设置为空的字符串
    let data = res.data.datas[i];
    if (data.open === 0) {
      data.open = "" as any;
      data.high = "" as any;
      data.low = "" as any;
      data.close = "" as any;
      data.settlement = "" as any;
      data.volume = "" as any;
      data.total_turnover = "" as any;
      data.open_interest = "" as any;
      data.average = "" as any;
    }
  }
  if(!myChart) {
    myChart = echarts.init(klineChart.value);
  }
  if (dataType === "分时") {
    myChart.setOption(klineOptions(res.data.datas, "normal", "tick"));
  } else {
    myChart.setOption(klineOptions(res.data.datas, "normal", "other"));
  }
};



onBeforeUnmount(() => {
  window.removeEventListener('resize', onHandlerWindowResize);
  if (timerId) {
    clearInterval(timerId);
  }
});

const onSelectTab = (index: number) => {
  quoteStore.codeTags.tabIndex = index;
}

const onSelectFreNum = async (name: string, value: number) => {
  dataType = name;
  freNum = value;
  data.isFresh = true;
  await nextTick();
  data.isFresh = false;
  setTimeout(() => {
    myChart = echarts.init(klineChart.value);
    isChangeFreNum = true;
  }, 0);
}

const onDelete = (_index: number, name: string) => {
  quoteStore.removeCode(name);
}

</script>

<template>
  <div class="kline-panel">

    <tab-bar :names=quoteStore.codeTags.tabs :cur-index="quoteStore.codeTags.tabIndex" @update-index="onSelectTab"
      @delete="onDelete" />
    <kdata-fre-bar :showNum="4" @select="onSelectFreNum" />
    <div v-if="!data.isFresh" ref="klineChart" class="kline-wrapper">
    </div>
  </div>
</template>

<style scoped lang="scss">
.kline-panel {
  .kline-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 81px;
    background: white;
  }
}
</style>